<template>
	<div class="detailsCoupons">
		<popup v-model="show" position="bottom" style="width:100%;">

			<div class="titleCoupons">领取优惠券</div>
			<ul class="coupon_list" style="background-color: #F5F5F5;">
				<li v-for="(val,index) in couponArr" v-if="couponArr" @click="mycoupons(val,index)" :class="[{already1:val.state=='准备开抢'||val.auditorStatus==7||val.auditorStatus==4}, {use:val.state=='已领取'}]">
					<dl>
						<dt class="spandt">{{val.couponName}}</dt>
						<dd class="spandd">{{useRangefn(val.useRange)}}</dd>
						<dd class="spandd" v-if="val.useRestriction==1">满{{val.fullElement}}元使用</dd>
						<!--<dd>使用平台：{{useterrace(val.usePlatform)}}</dd>-->
						<p v-if="val.auditorStatus==5">活动结束时间：{{val.activityEndTime}}</p>
						<p v-if="val.auditorStatus==7||val.auditorStatus==4">活动开始时间：{{val.activityStartTime}}</p>
					</dl>
					<div class="account_money">
						<div class="moneyclss">
							<span class="unit" v-if="val.couponAmount">¥</span>
							<span>{{pricetwo(1,val.couponAmount,val.couponDiscount)}}</span><span class="unit" v-if="val.couponAmount">{{pricetwo(2,val.couponAmount,val.couponDiscount)}}</span>
							<span class="unit" v-if="val.couponDiscount">折</span>
						</div>
						<p class="stateclss">{{val.state}}</p>
					</div>
				</li>
				<div class="no_data" v-if="couponArr.length==0">
					<img src="static/image/no-yh.png" style="width:70%;" />
					<p>暂无可领取的优惠券</p>
				</div>
			</ul>
			<div class="closeCoupons"><span @click="closeCover()">关闭</span></div>
		</popup>
	</div>
</template>
<script>
	import { Popup } from 'mint-ui';
	import { Toast } from "@/utils/toast";
	import { MessageBox } from '@/ui-components';
	import axios from "axios";
	export default {
		props: {
			couponArr: {
				type: Array,
				default: function() {
					let arr = [];
					return arr;
				}
			},

		},
		data() {
			return {
				show: false,
				couponsdata: [],
			}
		},
		computed: {

		},
		methods: {
			showCover() {
				this.show = true;
			},
			closeCover() {
				this.show = false;
			},
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item == 1) {
					return "商品券"
				} else if(item == 2) {
					return "品类券"
				} else if(item == 3) {
					return "品牌券"
				} else if(item == 4) {
					return "全场券"
				}
			},
			//优惠券数据处理
			getCoupons() {
				let couponsdata1 = [];
				let couponsdata2 = [];
				for(var i = 0; i < this.couponArr.length; i++) {
					if(this.couponArr[i].auditorStatus == 5) {
						this.couponArr[i].state = "立即领取"
						couponsdata1.push(this.couponArr[i])
					} else if(this.couponArr[i].auditorStatus == 7 || this.couponArr[i].auditorStatus == 4) {
						this.couponArr[i].state = "准备开抢"
						couponsdata2.push(this.couponArr[i])
					}
				}
				this.couponsdata = couponsdata1.concat(couponsdata2)
			},
			//领取优惠券
			mycoupons(val, index) {
				var sessionId = localStorage.getItem('sessionId');
				if(!sessionId || sessionId == 'undefined') {
					MessageBox('用户未登录账号', '请先登录账号再领取购物券吧').then(
						() => {
							this.$router.push({
								path: 'login',
								query: {
									page: 'Coupons'
								}
							})
						}
					)
					return
				}
				if(val.state == "已领取" || val.state == "准备开抢" || val.auditorStatus == 7 || val.auditorStatus == 4) {
					return
				}
				let url = window.api.trade_host + '/marketCenter/receiveCouponCodesOnline/' + val.couponCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					if(res.data.returnCode == 1) {
						MessageBox('', '恭喜领取成功!').then()
						val.state = "已领取"
					} else if(res.data.returnCode == 0) {
						if(res.data.msg == '登录超时，请重新登录!') {
							MessageBox(res.data.msg, '请先登录账号再领取购物券吧').then(
								() => {
									this.$router.push({
										path: 'login',
										query: {
											page: 'Coupons'
										}
									})
								}
							)
						} else {
							MessageBox('', res.data.msg).then()
							val.state = "准备开抢"
						}

					}
				})

			}

		},
		components: {
			"popup": Popup
		},
		created() {
			this.getCoupons()
		},
		beforeDestroy() {

		},
		watch: {
			couponArr() {
				this.getCoupons()
			}
		}

	}
</script>

<style scoped="scoped">
	.closeCoupons {
		height: 3rem;
		line-height: 3rem;
	}
	
	.closeCoupons span {
		display: inline-block;
		background-color: #EF5423;
		width: 95%;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.8rem;
		color: #fff;
		border-radius: 0.2rem;
	}
	
	.titleCoupons {
		height: 2rem;
		line-height: 2rem;
	}
	
	.detailsCoupons .coupon_list li {
		background: #fff;
		border: none;
		height: 4rem;
	}
	
	.detailsCoupons .coupon_list li dl {
		text-align: left;
		white-space: normal;
	}
	
	.detailsCoupons .coupon_list li dl dd {
		font-size: 0.5rem;
		padding: 0px;
	}
	
	.detailsCoupons .coupon_list li::after,
	.detailsCoupons .coupon_list li::before {
		background: none;
		border-left: none;
		border-bottom: none;
		border-radius: none;
	}
	
	.detailsCoupons .coupon_list li .account_money .unit {
		font-size: 0.8rem;
	}
	
	.detailsCoupons .coupon_list li .account_money {
		background: url(../../../static/image/myCoupon1.png) no-repeat right;
		background-size: contain;
		height: 4rem;
		color: #fff;
		border: none;
	}
	
	.detailsCoupons .coupon_list li .account_money .moneyclss {
		height: 1rem;
	}
	
	.detailsCoupons .coupon_list li .stateclss {
		height: 1rem;
		display: inline-block;
		color: #fff;
	}
	
	.detailsCoupons .coupon_list li .account_money span {
		font-size: 1.4rem;
		display: inline-block;
	}
	
	.detailsCoupons .coupon_list li dl dt {
		font-weight: normal !important;
		width: 12.6rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.detailsCoupons .coupon_list li.already1,
	.detailsCoupons .coupon_list li.use {
		opacity: 0.5;
	}
	
	.detailsCoupons .coupon_list li.already1 .account_money {
		background: url(../../../static/image/myCoupon3.png) no-repeat right;
		background-size: contain;
		color: #fff;
	}
	
	.detailsCoupons .coupon_list li.use .account_money {
		background: url(../../../static/image/myCoupon1.png) no-repeat right;
		background-size: contain;
		color: #fff;
	}
	
	.detailsCoupons .coupon_list li.already1 dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
	}
</style>